import React, {Component} from 'react';
import {DatePicker, Form, Input, Select} from 'antd';
import Lng from "../common/lng";
import Service from "./Service";

class AddDeviceForm extends Component {

    state = {
        dTypes: [], stores: []
    }

    componentDidMount() {
        const self = this;
        Service.loadStoreAndDeviceType((types, stores) => {
            self.setState({
                dTypes: types.data,
                stores: stores.data
            });
        });
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 15},
            }
        };
        return (
            <Form>
                <Form.Item
                    {...formItemLayout}
                    label={Lng.get("device.code")}
                >
                    {getFieldDecorator('code', {
                        rules: [{
                            required: true,
                            message: Lng.get("common.placeholder", {some: Lng.get("device.code")})
                        }],
                    })(
                        <Input/>
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label={Lng.get("device.name")}>
                    {getFieldDecorator('name', {
                        rules: [{
                            required: true,
                            message: Lng.get("common.placeholder", {some: Lng.get("device.name")})
                        }],
                    })(
                        <Input/>
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label={Lng.get("device.type")}>
                    {getFieldDecorator('deviceTypeCode', {
                        rules: [{
                            required: true,
                            message: Lng.get("common.select", {some: Lng.get("device.type")})
                        }],
                    })(
                        <Select
                            showSearch
                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                            style={{width: 200}}
                        >
                            {
                                this.state.dTypes.map((t) => {
                                    return <Select.Option key={t.id} value={t.code}>{t.name}</Select.Option>
                                })
                            }
                        </Select>
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label={Lng.get("device.store")}>
                    {getFieldDecorator('storeCode', {
                        rules: [{
                            required: true,
                            message: Lng.get("common.select", {some: Lng.get("device.store")})
                        }],
                    })(
                        <Select
                            showSearch
                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                            style={{width: 200}}
                        >
                            {
                                this.state.stores.map((t) => {
                                    return <Select.Option key={t.id} value={t.code}>{t.name}</Select.Option>
                                })
                            }
                        </Select>
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label={Lng.get("device.enableStartTime")}>
                    {getFieldDecorator('enableStartTime', {
                        rules: [{
                            required: false
                        }],
                    })(
                        <DatePicker/>
                    )}
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    label={Lng.get("device.enableEndTime")}>
                    {getFieldDecorator('enableEndTime', {
                        rules: [{
                            required: false
                        }],
                    })(
                        <DatePicker/>
                    )}
                </Form.Item>
            </Form>
        );
    }
}

const _AddDeviceForm = Form.create()(AddDeviceForm);
export default _AddDeviceForm;